<template>
  <el-container>
    <el-header>水果CRUD操作</el-header>
    <el-main>
      <el-row>
        <el-button type="primary" @click="AddFruit">增加水果</el-button>
        <el-button type="primary" @click="ShowFruitBar">查看水果销量柱状图</el-button>
      </el-row>

      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          fixed
          prop="id"
          label="水果ID"
          width="160">
        </el-table-column>
        <el-table-column
          prop="name"
          label="水果名称"
          width="160">
        </el-table-column>
        <el-table-column
          prop="sale"
          label="水果销量"
          width="160">
        </el-table-column>
        <el-table-column
          prop="icon"
          label="图片"
          width="160">

          <template slot-scope="scope">
            <img :src="scope.row.icon" style="height: 70px"/>
          </template>

        </el-table-column>
        <el-table-column
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="fruitDelete(scope.row)" type="text" size="small">删除</el-button>
            <el-button @click="findFruit(scope.row)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>

</template>

<script>
export default {
  name: 'FruitList',
  data () {
    return {
      tableData: null
    }
  },
  created () {
    this.getFruitList()
  },
  methods: {
    async getFruitList () {
      const { data: res } = await this.axios.get('/fruit/list')
      console.log(res)
      this.tableData = res
    },
    AddFruit () {
      this.$router.push('/addfruit')
    },
    ShowFruitBar () {
      this.$router.push('/fruitbar')
    },
    fruitDelete (fruitobj) {
      this.$confirm('是否确定要删除' + fruitobj.name + '？', '删除数据', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data: res } = await this.axios.delete('/fruit/delete/' + fruitobj.id)
        if (res) {
          this.$alert(fruitobj.name + '删除成功！', '删除数据', {
            confirmButtonText: '确定',
            callback: action => {
              location.reload()
            }
          })
        }
      })
    },
    findFruit (fruitobj) {
      this.$router.push({ path: '/editfruit', query: { id: fruitobj.id } })
    }
  }
}
</script>

<style  scoped>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-main {
    /*background-color: #E9EEF3;*/
    color: #333;
    text-align: center;
    line-height: 160px;
    margin: 0 auto;
  }
</style>
